<lv-treetable [lvData]="data" #lvTable [lvPaginator]="page">
  <thead>
    <tr>
      <th lvCellKey="name">Name</th>
      <th lvCellKey="age">Age</th>
      <th lvCellKey="random">Random</th>
    </tr>
  </thead>

  <tbody cdkDropList (cdkDropListDropped)="drop($event)">
    <ng-container *ngTemplateOutlet="bodyContentTpl; context: { $implicit: lvTable.renderData, level: 0 }"></ng-container>

    <!-- template -->
    <ng-template #bodyContentTpl let-data let-level="level">
      <ng-container *ngFor="let item of data">
        <tr *ngIf="level !== 1">
          <ng-container *ngTemplateOutlet="trContainerTpl; context: { $implicit: item, level: level }"></ng-container>
        </tr>

        <!-- 可以在数据中添加唯一标识，比如isLeaf来判断当前行是否可被拖拽，适用于展开互斥的场景 -->
        <tr *ngIf="level === 1" cdkDrag [cdkDragData]="item">
          <!-- 拖动时占位符 -->
          <td colspan="3" class="app-custom-placeholder" *cdkDragPlaceholder></td>
          <!-- 拖动预览图 -->
          <td colspan="3" *cdkDragPreview></td>
          <!-- 实际渲染视图 -->
          <ng-container *ngTemplateOutlet="trContainerTpl; context: { $implicit: item, level: level }"></ng-container>
        </tr>

        <ng-container *ngIf="item.expanded && item.children?.length">
          <ng-container *ngTemplateOutlet="bodyContentTpl; context: { $implicit: item.children, level: level + 1 }"></ng-container>
        </ng-container>
      </ng-container>
    </ng-template>

    <ng-template #trContainerTpl let-data let-level="level">
      <td
        [lvShowExpanded]="data.children?.length"
        [(lvExpanded)]="data.expanded"
        (lvExpandedChange)="expandedChange($event, data)"
        [lvPaddingLeft]="level * 24 + 'px'"
      >
        {{ data.data.name }}
      </td>
      <td>{{ data.data.age }}</td>
      <td>{{ data.data.random }}</td>
    </ng-template>
  </tbody>
</lv-treetable>
<lv-paginator #page lvPageSize="5"></lv-paginator>
